<!-- 1 template  -->
<template>
    子组件
    <div>
        <h3>用户信息</h3>
        <div>user.name:{{ user.name }}</div>
        <div>user.age:{{ user.age }}</div>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<!-- 2 script -->
<script setup lang="ts" name='Child'>
import { ref, reactive, toRef, toRefs } from "vue";


let user = reactive({
    name: '张三',
    age: 18,
    // a: {
    //     b: {
    //         c: 100
    //     }
    // }
})

//从 响应式对象中获取数据  赋值给单独的变量，这个变量 没有响应式
// let name = toRef(user, 'name')
// let age = toRef(user, 'age')

//解构的语法
let { name, age } = toRefs(user)





function changeName() {
    console.log("user", user);
    console.log("name", name);

    // user.name = user.name + '~'
    name.value = name.value + '~'
}





</script>

<!-- 3 style -->
<style scoped></style>